<!--
 * @Author: 谢陈洁
 * @Date: 2025-06-06 11:08:34
 * @LastEditors: 谢陈洁
 * @LastEditTime: 2025-06-26 15:59:16
 * @Description: file content
-->
<template>
  <div class="pro-table-wrapper">
    <!-- VUE3 最新版默认绑定了属性 v-bind="$attr" 默认属性可以先在这边绑定 父组件传递的属性会自动绑定到组件的属性上并且覆盖  -->
    <el-table
      ref="tableRef"
      :data="data"
      class="pro-table"
      v-bind="{ ...defaultOptions, ...$attrs }"
      @row-click="handleRowClick"
      @selection-change="$emit('selection-change')"
      @row-dblclick="$emit('row-dblclick')"
      @row-contextmenu="$emit('row-contextmenu')"
      @row-mouse-enter="$emit('row-mouse-enter')"
      @row-mouse-leave="$emit('row-mouse-leave')"
      @sort-change="$emit('sort-change')"
      @filter-change="$emit('filter-change')"
      @header-dragend="$emit('header-dragend')"
    >
      <template v-for="column in newColumns" :key="column.prop || column.label">
        <el-table-column v-bind="column">
          <!--  default 插槽 是elementplus  默认的插槽 -->
          <template #default="scope">
            <!-- scope 插槽参数 里面包含  scope.row  scope.column  scope.$index  -->
            <!-- 下面的插槽是自定义的插槽 用于覆盖elementplus的默认插槽  -->
            <slot v-if="column.slot" :name="column.slot" v-bind="scope"></slot>
            <el-link
              v-if="column.type === 'link'"
              type="primary"
              @click="$emit('link-click', scope.row)"
            >
              {{ scope.row[column.prop] }}
            </el-link>
            <el-icon v-if="column.type === 'icon'">
              <component :is="scope.row[column.prop]"></component>
            </el-icon>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <Pagination
      v-if="pagination && pagination?.total"
      v-bind="pagination"
      @pagination-change="handlePaginationChange"
      class="pagination-wrapper"
    />
  </div>
</template>
<script setup lang="ts">
  import { ElTable, type TableInstance } from 'element-plus'
  import type { IColumn, ProPaginationProps } from './type'
  import Pagination from './Pagination/index.vue'
  const tableRef = ref<TableInstance>()
  const emit = defineEmits([
    'row-click',
    'link-click', // 链接点击
    'row-dblclick',
    'row-contextmenu', // 鼠标右键
    'row-mouse-enter', // 鼠标移入
    'row-mouse-leave', // 鼠标移出
    'selection-change', // 选择改变
    'sort-change', // 排序改变
    'filter-change', // 过滤改变
    'header-dragend', // 表头拖拽结束
    'expand-change', // 展开行改变
    'pagination-change'
  ])
  const props = defineProps({
    // 表格列配置
    columns: {
      type: Array as PropType<IColumn<any>[]>,
      default: () => []
    },
    // 表格数据源
    data: {
      type: Array as PropType<any[]>,
      default: () => []
    },
    // 显示索引列
    showIndex: {
      type: Boolean,
      default: false
    },
    // 显示选择列
    showSelection: {
      type: Boolean,
      default: false
    },
    // 分页数据
    pagination: {
      type: Object as PropType<ProPaginationProps>
    }
  })
  // 列配置
  const defaultOptions = {
    border: true, // 是否显示边框
    stripe: true, // 是否为斑马纹表格
    showHeader: true, // 是否显示表头
    fit: true, // 列宽是否自撑开
    emptyText: '暂无数据',
    // size: 'small' as 'small' | 'default' | 'large',
    rowKey: 'id',
    showOverflowTooltip: true, // 是否显示超出内容的tooltip
    highlightCurrentRow: true // 是否高亮当前行
    // 默认排序
    // defaultSort: { prop: 'id', order: 'ascending' as 'ascending' | 'descending' }
  }
  const newColumns = computed((): IColumn[] => {
    const columns: IColumn[] = []
    if (props.showSelection) {
      columns.push({
        type: 'selection',
        width: 50,
        align: 'center',
        prop: 'selection'
      } as IColumn)
    }
    if (props.showIndex) {
      columns.push({
        type: 'index',
        width: 60,
        align: 'center',
        label: '序号',
        prop: 'index'
      } as IColumn)
    }
    return [...columns, ...props.columns]
  })
  // 行点击的事件
  const handleRowClick = (row: Record<string, any>) => {
    // 配置点击行 如果显示多选 则切换选择状态
    if (props.showSelection) tableRef.value?.toggleRowSelection(row)
    emit('row-click', row)
  }
  const handlePaginationChange = (params: { pageIndex: number; pageSize: number }) => {
    emit('pagination-change', params)
  }
</script>
<style lang="scss" scoped>
  .pro-table-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;

    .pro-table {
      flex: 1;
    }

    .pagination-wrapper {
      margin-top: 15px;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
